<template>
  <div class="page_container">
    <PageTitle />

    <div class="search_part">
      <div class="left">
        <div class="item">
          <span>贡献类型：</span>
          <el-select v-model="searchKey.type" placeholder="请选择贡献类型" @change="getPagingList(1)">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="item">
          <span>贡献方式：</span>
          <el-select v-model="searchKey.mode" placeholder="请选择贡献方式" @change="getPagingList(1)">
            <el-option
              v-for="item in modeList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="item">
          <span>会员名称/积分/确认人：</span>
          <el-input v-model="searchKey.keywords" placeholder="请输入会员名称/积分/确认人" style="width: 240px;" clearable></el-input>
          <el-button @click="getPagingList(1)" type="primary" round>
            搜索
          </el-button>
        </div>
      </div>
      <div class="right">
        <el-button
          v-if="isBtnPermission('ContributionAdd')"
          @click="$router.push({name:'ContributionAdd'})"
          type="primary"
          round
        >
          新增
        </el-button>
      </div>
    </div>
    <!-- pagingList -->
    <TableScroll :data="[{id:1, stateObj:{id:1}, receiveType:2}]">
      <el-table-column label="会员名称" prop="name" align="center" show-overflow-tooltip />
      <el-table-column label="贡献类型" prop="typeObj.name" align="center" show-overflow-tooltip />
      <el-table-column label="物品名称/金额" prop="goods" align="center" show-overflow-tooltip />
      <el-table-column label="贡献方式" prop="modeObj.name" align="center" show-overflow-tooltip />
      <el-table-column label="积分" align="center" show-overflow-tooltip>
        <template slot-scope="{row}">
          {{row.integral}}分
        </template>
      </el-table-column>
      <el-table-column label="贡献时间" prop="time" align="center" show-overflow-tooltip />
      <el-table-column label="确认人" prop="confirmer" align="center" show-overflow-tooltip />
      <el-table-column label="状态" prop="stateObj.name" align="center" show-overflow-tooltip />
      <el-table-column
        label="操作"
        align="center"
        :width="tableActionWidth(actionBtns, {exclusionBtns})"
        fixed="right"
        v-if="tableActionWidth(actionBtns, {exclusionBtns})"
      >
        <template slot-scope="{row}">
          <el-button
            v-if="isBtnPermission('ContributionDetail')"
            @click="$router.push({name:'ContributionDetail', params: {id: row.id}})"
            type="success"
            round
          >
            查看
          </el-button>
          <template v-if="row.receiveType == 2 && row.stateObj.id == 1">
            <el-button
              v-if="isBtnPermission('ContributionConfirm')"
              @click="confirm(row)"
              type="warning"
              round
            >
              确认
            </el-button>
            <el-button
              v-if="isBtnPermission('ContributionBack')"
              @click="backOrObsolete(row.id, 3)"
              type="danger"
              round
            >
              退回
            </el-button>
          </template>
          <el-button
            v-if="isBtnPermission('ContributionObsolete') && row.receiveType == 1 && row.stateObj.id != 4"
            @click="backOrObsolete(row.id, 4)"
            type="warning"
            round
          >
            作废
          </el-button>
        </template>
      </el-table-column>

      <template #pagination>
        <Pagination
          :page="index"
          :limit="size"
          :total="totalSize"
          @pagination="handlePagination"
          :hidden="!pagingList.length"
        />
      </template>
    </TableScroll>

    <el-dialog
      title="确认贡献"
      width="750px"
      :visible.sync="showConfirm"
      :close-on-click-modal="false"
      :before-close="cancelConfirm"
    >
      <Form
        :data="opts"
        :rows="2"
        :cols="1"
        width="500px"
        label-width="100px"
      >
        <template #integral>
          <span class="stick">{{integral}}分</span>
        </template>
      </Form>
      <div class="dialog_btns">
        <el-button
          @click="doEditContributionState(rowObj.id, { stateId: 2, estimated: Number(opts.estimated.value) })"
          type="primary"
          round
        >
          确认
        </el-button>
        <el-button @click="cancelConfirm" round>
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getContributionList,
  editContributionState,
} from '@/api/home/contribution.js';
import paging from '@m/paging.js';

export default {
  name: 'Contribution',
  mixins: [paging],
  data() {
    return {
      pageName: 'Contribution',
      actionBtns: ['ContributionDetail', 'ContributionConfirm', 'ContributionBack', 'ContributionObsolete'],
      exclusionBtns: [['ContributionConfirm', 'ContributionBack'], 'ContributionObsolete'],
      typeList: [{ id: 0, name: '全部' }],
      modeList: [{ id: 0, name: '全部' }],
      showConfirm: false,
      searchKey: {
        type: 0,
        mode: 0,
        keywords: '',
      },
      listFn: getContributionList,
      rowObj: {},
      integral: 0,
      opts: {
        estimated: {
          label: '物品预估价值：',
          value: null,
          labelWidth: '115px',
          attrs: {
            suffix: '元',
          },
          events: {
            input: e => {
              setTimeout(() => {
                this.integral = e || 0;
              }, 100);
            },
          },
          directives: {
            input: /0|[1-9]\d*/,
          },
          position: [1, 1],
        },
        integral: {
          label: '调整后积分：',
          slot: true,
          attrs: {
            readonly: true,
          },
          readonly: true,
          position: [2, 1],
        },
      },
    };
  },
  created() {
    this.getEnums();
  },
  activated() {
    this.$store.commit('layout/initManuallyRefresh', async() => {
      this.getEnums();
    });
  },
  methods: {
    getEnums() {
      this.$store.dispatch('enums/getEnum', { // 贡献类型
        id: 1,
        value: this.searchKey.type,
        callback: (res, isDel) => {
          if (isDel) {
            this.searchKey.type = 0;
          }
          res.unshift({
            id: 0,
            name: '全部',
          });
          this.typeList = res;
        }
      });
      this.$store.dispatch('enums/getEnum', { // 贡献方式
        id: 1,
        value: this.searchKey.mode,
        callback: (res, isDel) => {
          if (isDel) {
            this.searchKey.mode = 0;
          }
          res.unshift({
            id: 0,
            name: '全部',
          });
          this.modeList = res;
        }
      });
    },
    backOrObsolete(id, stateId) {
      let title = '', msg = '';
      switch (stateId) {
        case 3:
          title = '退回确认';
          msg = '是否退回该贡献，退回后将生效不能撤回？';
          break;
        case 4:
          title = '作废确认';
          msg = '是否作废该贡献，作废后将生效不能撤回？';
          break;
      }
      this.$confirm(msg, title, {
        type: 'warning',
      }).then(() => {
        this.doEditContributionState(id, { stateId });
      });
    },
    doEditContributionState(id, data) {
      editContributionState(id, {
        data,
      }).then(res => {
        if (res.code == 200) {
          let msg = '';
          switch (data.stateId) {
            case 2: // 确认
              msg = '确认成功';
              this.showConfirm = false;
              break;
            case 3: // 退回
              msg = '退回成功';
              break;
            case 4: // 作废
              msg = '作废成功';
              break;
          }
          this.$message.success(msg);
          this.getPagingList();
        }
      });
    },
    confirm(row) {
      this.showConfirm = true;
      this.rowObj = row;
    },
    cancelConfirm() {
      this.integral = 0;
      this.opts.estimated.value = null;
      this.showConfirm = false;
    },
  },
  components: {
    Pagination: () => import('@c/Pagination'),
    Form: () => import('@c/Form'),
  }
};
</script>
<style scoped lang="scss">

</style>
